<template>
	<!-- 少多语言 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.o012}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<view class="" style="height: 24rpx;">

			</view>

			<view class="nameList ml-3 flex  A-Medium" :class="model=='light'?'nameListLight':''">
				<view @click="changePriceType(index)" class="mr-4 flex align-center justify-center"
					:class="index==priceType?'item1':'item'" v-for="(item,index) in nameList">
					{{item}}
				</view>
			</view>
			<view class="" style="height: 36rpx;">

			</view>
			<view style="width: 100%;text-align: center;">
				<image :src="'/static/images/option/1_light.png'" style="width: 690rpx;height: 27rpx;"></image>
				<!-- <image :src="'/static/images/option/1_'+model+'.png'" style="width: 690rpx;height: 27rpx;"></image> -->
			</view>
		</view>
		<!-- BTC -->
		<template v-if="optionBTC">
			<view class="listWrap A-Regular p-3 m-3" :class="model=='light'?'listWrapLight':''">
				<!-- 第一行 -->
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<view class="f0 mr-2">
							<image style="width: 72rpx;height: 72rpx;" :src="'/static/images/option/2_'+model+'.png'" mode=""></image>
						</view>
						<view class="">
							<view class="color3 A-Medium" style="font-size: 28rpx;">
								{{i18n.o001}}{{optionBTC.coinType}}
							</view>
							<view :class="(optionBTC.priceChangePercent.indexOf('-')==-1)?'color1':'color2'" style="font-size: 24rpx;">
								<text style="margin-right: 12rpx;">${{(optionBTC.price/1).toFixed(2)}}</text>
								<text>+{{optionBTC.priceChangePercent}}%</text>
							</view>
						</view>
					</view>
					<view @click="handelBuy('BTC',optionBTC.price)" class="btn A-Medium py-1 px-2 color5" style="font-size: 24rpx;">
						{{i18n.o011}}
					</view>
				</view>
				<!-- 第二行 -->
				<view class="mt-3 flex A-Medium align-center color3 justify-between" style="font-size: 24rpx;">
					<view class="">
						{{i18n4.l012}}
					</view>
					<view class="">
						{{i18n4.l013}}
					</view>
				</view>
				<!-- 第三行 -->
				<view class="flex mb-3 align-center color5" style="font-size: 24rpx;height: 32rpx;background: #D22540;border-radius: 8rpx;overflow: hidden;margin-top: 14rpx;position: relative;">
					<view class="flex-1 flex align-center justify-center">
						<view class="flex align-center" style="height: 32rpx;position: absolute;left: 50rpx;top: 0;">
							{{optionBTC.buyRatio}}%{{i18n2.i024}}
						</view>
					</view>
					<view class="flex align-center justify-center" :style="'width:'+optionBTC.sellRatio+'%;'" style="background: #53D290;height: 32rpx;">
						<view class="flex align-center" style="height: 32rpx;position: absolute;right: 50rpx;top: 0;">
							{{optionBTC.sellRatio}}%{{i18n2.i025}}
						</view>
						
					</view>
				</view>
				<!-- 第四行 -->
				<view class="flex mb-3 align-center justify-between" style="padding: 0 36rpx;">
					<view class="flex flex-column align-center">
						<view class="color3" style="font-size: 28rpx;">
							{{time1}}
						</view>
						<view class="title2 A-Medium">
							{{i18n4.l014}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="color3" style="font-size: 28rpx;">
							{{time2}}
						</view>
						<view class="title2 A-Medium">
							{{i18n4.l015}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="color4" style="font-size: 28rpx;">
							{{time3}}
						</view>
						<view class="title2 A-Medium">
							{{i18n4.l016}}
						</view>
					</view>
				</view>
				<!-- 第五行 -->
				<view class="box flex align-center justify-between">
					<view class="flex flex-column align-center">
						<view class="title2 A-Medium" style="font-size: 28rpx;">
							{{i18n4.l017}}
						</view>
						<view class="color1 A-Medium" style="font-size: 28rpx;">
							+{{optionBTC.settlementProfitPercent}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="title2 A-Medium" style="font-size: 28rpx;">
							{{i18n4.l018}}
						</view>
						<view class="color2 A-Medium" style="font-size: 28rpx;">
							-{{optionBTC.settlementLossPercent}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="title2 A-Medium" style="font-size: 28rpx;">
							{{i18n4.l019}}
						</view>
						<view class="color1 A-Medium" style="font-size: 28rpx;">
							+{{optionBTC.sellProfitPercent}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="title2 A-Medium" style="font-size: 28rpx;">
							{{i18n4.l020}}
						</view>
						<view class="color2 A-Medium" style="font-size: 28rpx;">
							-{{optionBTC.sellLossPercent}}
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- ETH -->
		<template v-if="optionETH">
			<view class="listWrap A-Regular p-3 m-3" :class="model=='light'?'listWrapLight':''">
				<!-- 第一行 -->
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<view class="f0 mr-2">
							<image style="width: 72rpx;height: 72rpx;" :src="'/static/images/option/6_'+model+'.png'" mode=""></image>
						</view>
						<view class="">
							<view class="color3 A-Medium" style="font-size: 28rpx;">
								{{i18n.o013}}{{optionETH.coinType}}
							</view>
							<view :class="(optionETH.priceChangePercent.indexOf('-')==-1)?'color1':'color2'" style="font-size: 24rpx;">
								<text style="margin-right: 12rpx;">${{(optionETH.price/1).toFixed(2)}}</text>
								<text>+{{optionETH.priceChangePercent}}%</text>
							</view>
						</view>
					</view>
					<view @click="handelBuy('ETH',optionETH.price)" class="btn A-Medium py-1 px-2 color5" style="font-size: 24rpx;">
						{{i18n.o011}}
					</view>
				</view>
				<!-- 第二行 -->
				<view class="mt-3 flex A-Medium align-center color3 justify-between" style="font-size: 24rpx;">
					<view class="">
						{{i18n4.l012}}
					</view>
					<view class="">
						{{i18n4.l013}}
					</view>
				</view>
				<!-- 第三行 -->
				<view class="flex mb-3 align-center color5" style="font-size: 24rpx;height: 32rpx;background: #D22540;border-radius: 8rpx;overflow: hidden;margin-top: 14rpx;position: relative;">
					<view class="flex-1 flex align-center justify-center">
						<view class="flex align-center" style="height: 32rpx;position: absolute;left: 50rpx;top: 0;">
							{{optionETH.buyRatio}}%{{i18n2.i024}}
						</view>
						
					</view>
					<view class="flex align-center justify-center" :style="'width:'+optionETH.sellRatio+'%;'" style="background: #53D290;height: 32rpx;">
						<view class="flex align-center" style="height: 32rpx;position: absolute;right: 50rpx;top: 0;">
							{{optionETH.sellRatio}}%{{i18n2.i025}}
						</view>
					</view>
				</view>
				<!-- 第四行 -->
				<view class="flex mb-3 align-center justify-between" style="padding: 0 36rpx;">
					<view class="flex flex-column align-center">
						<view class="color3" style="font-size: 28rpx;">
							{{time4}}
						</view>
						<view class="title2 A-Medium">
							{{i18n4.l014}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="color3" style="font-size: 28rpx;">
							{{time5}}
						</view>
						<view class="title2 A-Medium">
							{{i18n4.l015}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="color4" style="font-size: 28rpx;">
							{{time6}}
						</view>
						<view class="title2 A-Medium">
							{{i18n4.l016}}
						</view>
					</view>
				</view>
				<!-- 第五行 -->
				<view class="box flex align-center justify-between">
					<view class="flex flex-column align-center">
						<view class="title2 A-Medium" style="font-size: 28rpx;">
							{{i18n4.l017}}
						</view>
						<view class="color1 A-Medium" style="font-size: 28rpx;">
							+{{optionETH.settlementProfitPercent}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="title2 A-Medium" style="font-size: 28rpx;">
							{{i18n4.l018}}
						</view>
						<view class="color2 A-Medium" style="font-size: 28rpx;">
							-{{optionETH.settlementLossPercent}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="title2 A-Medium" style="font-size: 28rpx;">
							{{i18n4.l019}}
						</view>
						<view class="color1 A-Medium" style="font-size: 28rpx;">
							+{{optionETH.sellProfitPercent}}
						</view>
					</view>
					<view class="flex flex-column align-center">
						<view class="title2 A-Medium" style="font-size: 28rpx;">
							{{i18n4.l020}}
						</view>
						<view class="color2 A-Medium" style="font-size: 28rpx;">
							-{{optionETH.sellLossPercent}}
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		optionsAdd,
		optionsOptionsMarkets,
		coinglassOhlc_history
	} from '@/core/api/index.js';
	export default {
		data() {
			return {
				topBarIndex: 0,
				nameList: ['15m', '30m', '1h'],
				priceType: 0,
				timeName: '12h',
				// BTC
				// list: '',
				timer: null,
				time1: '-- : -- : --',
				time2: '-- : -- : --',
				time3: '-- : -- : --',
				// ETH
				// list2: '',
				// timer2: null,
				time4: '-- : -- : --',
				time5: '-- : -- : --',
				time6: '-- : -- : --',
			}
		},
		computed: {
			i18n() {
				return this.$t('option');
			},
			i18n2() {
				return this.$t('index');
			},
			i18n4() {
				return this.$t('last3');
			},
			model() {
				return this.$store.state.config.model;
				// return 'dark'
			},
			optionBTC() {
				return this.$store.state.config.optionBTC;
			},
			optionETH() {
				return this.$store.state.config.optionETH;
			},
		},
		onLoad() {
			// this.getOptionsOptionsMarkets();
			// this.getOptionsOptionsMarkets2();
		},
		onShow() {
			this.changeTime3();
		},
		methods: {
			changeTime3(){
				this.changeTime2();
				clearInterval(this.timer);
				this.timer = null;
				this.timer = setInterval(e=>{
					if(this.optionBTC!=''){
						this.changeTime2();
					}
				},1000)
			},
			changeTime2(){
				this.time1 = this.changeTime(this.optionBTC.buyTimeEnd.split(':'),1);
				this.time2 = this.changeTime(this.optionBTC.sellTimeEnd.split(':'),2);
				this.time3 = this.changeTime(this.optionBTC.settlementTimeEnd.split(':'),3);
				this.time4 = this.changeTime(this.optionETH.buyTimeEnd.split(':'),1);
				this.time5 = this.changeTime(this.optionETH.sellTimeEnd.split(':'),2);
				this.time6 = this.changeTime(this.optionETH.settlementTimeEnd.split(':'),3);
			},
			changeTime(arr,type) {
				// type 1购买 2平仓 3交割
				const now = new Date();
				const targetTime = new Date(now);
				if(arr.length==2) {
					arr[2] = '00';
				}
				targetTime.setHours(arr[0], arr[1], arr[2], 0); // 设置目标时间
				if (targetTime <= now) {
					// 如果目标时间已经过去，设置为明天的同一时间
					return '-- : -- : --';
				}
				const difference = targetTime.getTime() - now.getTime();
				let seconds = Math.floor(difference / 1000) % 60;
				let minutes = Math.floor(difference / 1000 / 60) % 60;
				let hours = Math.floor(difference / 1000 / 60 / 60) % 24;
				hours = String(hours).padStart(2, '0');
				minutes = String(minutes).padStart(2, '0');
				seconds = String(seconds).padStart(2, '0');
				if(type==1){
					return hours + ':' + minutes + ':' + seconds;
				}
				if(type==2){
					if(this.priceType==0){
						if(Number(minutes)<5){
							return hours + ':' + minutes + ':' + seconds;
						}else{
							return '-- : -- : --';
						}
					}
					if(this.priceType==1){
						if(Number(minutes)<10){
							return hours + ':' + minutes + ':' + seconds;
						}else{
							return '-- : -- : --';
						}
					}
					if(this.priceType==2){
						if(Number(minutes)<20){
							return hours + ':' + minutes + ':' + seconds;
						}else{
							return '-- : -- : --';
						}
					}
				}
				if(type==3){
					return hours + ':' + minutes + ':' + seconds;
				}
				
			},
			changePriceType(e) {
				if (this.priceType == e) {
					return;
				}
				this.priceType = e;
				// this.optionBTC = '';
				// this.optionETH = '';
				this.$store.state.config.optionBTC = '';
				this.$store.state.config.optionETH = '';
				this.$store.commit("config/set_optionType",this.nameList[this.priceType]);
				// this.getOptionsOptionsMarkets();
				// // 以太坊
				// this.getOptionsOptionsMarkets2();
			},
			getOptionsOptionsMarkets() {
				optionsOptionsMarkets({
					coinType: 'BTC',
					range: this.nameList[this.priceType]=='60m'?'1h':this.nameList[this.priceType]
				}).then(res => {
					console.log(res, 'cs-cs1');
					this.list = res.result;
					// 交割 购买 平仓
					this.changeList();
					this.list.price = Number(this.list.price).toFixed(2);
				})
			},
			getOptionsOptionsMarkets2() {
				optionsOptionsMarkets({
					coinType: 'ETH',
					range: this.nameList[this.priceType]=='60m'?'1h':this.nameList[this.priceType]
				}).then(res => {
					console.log(res, 'cs-cs2');
					this.list2 = res.result;
					// 交割 购买 平仓
					this.changeList2();
					this.list2.price = Number(this.list.price).toFixed(2);
				})
			},
			changeList() {
				clearInterval(this.timer);
				this.timer = null;
				this.timer = setInterval(e => {
					if (this.time1 == '00:00:01') {
						clearInterval(this.timer);
						this.timer = null;
						this.getOptionsOptionsMarkets();
					}
					this.getTimeRemainingUntil1845(this.list.settlementTimeEnd.split(':'), 1);
					this.getTimeRemainingUntil1845(this.list.buyTimeEnd.split(':'), 2);
					this.getTimeRemainingUntil1845(this.list.sellTimeEnd.split(':'), 3);
				}, 1000)
			},
			changeList2() {
				clearInterval(this.timer2);
				this.timer2 = null;
				this.timer2 = setInterval(e => {
					if (this.time4 == '00:00:01') {
						clearInterval(this.timer2);
						this.timer2 = null;
						this.getOptionsOptionsMarkets2();
					}
					this.getTimeRemainingUntil1845(this.list2.settlementTimeEnd.split(':'), 4);
					this.getTimeRemainingUntil1845(this.list2.buyTimeEnd.split(':'), 5);
					this.getTimeRemainingUntil1845(this.list2.sellTimeEnd.split(':'), 6);
				}, 1000)
			},
			getTimeRemainingUntil1845(arr, type) {
				const now = new Date();
				const targetTime = new Date(now);
				targetTime.setHours(arr[0], arr[1], arr[2], 0); // 设置目标时间
				if (targetTime <= now) {
					// 如果目标时间已经过去，设置为明天的同一时间
					// targetTime.setDate(targetTime.getDate() + 1);
					this['time' + type] = '-- : -- : --';
					return;
				}

				const difference = targetTime.getTime() - now.getTime();
				let seconds = Math.floor(difference / 1000) % 60;
				let minutes = Math.floor(difference / 1000 / 60) % 60;
				let hours = Math.floor(difference / 1000 / 60 / 60) % 24;
				hours = String(hours).padStart(2, '0');
				minutes = String(minutes).padStart(2, '0');
				seconds = String(seconds).padStart(2, '0');
				if ((type == 3 || type == 6) && (Number(minutes)) >= 5) {
					this['time' + type] = '-- : -- : --';
				} else {
					this['time' + type] = hours + ':' + minutes + ':' + seconds;
				}
			},
			
			padZero(num) {
				return num < 10 ? `0${num}` : num;
			},
			handelBuy(coinType, price) {
				if (coinType == 'ETH') {
					uni.setStorageSync('option2', JSON.stringify(this.list2));
				} else {
					uni.setStorageSync('option2', JSON.stringify(this.list));
				}
				this.$tool.navTo('/pages/option/option2?tradeDuration=' + this.nameList[this.priceType] + '&coinType=' +
					coinType + '&price=' + price);

			},

		}
	}
</script>

<style scoped lang="scss">
	.listWrap {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		.color1 {
			color: #D22540;
		}
		.color2 {
			color: #53D290;
		}
		.color3 {
			color: #F7F7F7;
		}
		.color4 {
			color: #82DA4C;
		}
		.color5 {
			color: #F7F7F7;
		}
		.title2 {
			font-size: 24rpx;
			color: #7F838D;
		}
		.btn {
			background: #5951BA;
			border-radius: 122rpx;
		}
		.box {
			background: #1F2128;
			border-radius: 36rpx;
			padding: 30rpx 44rpx;
		}
	}
	.listWrapLight {
		background: #FFFFFF;
		border-radius: 30rpx;
		border: 2rpx solid #FFFFFF;
		.color1 {
			color: #D22540;
		}
		.color2 {
			color: #53D290;
		}
		.color3 {
			color: #0E0F11;
		}
		.color4 {
			color: #82DA4C;
		}
		.color5 {
			color: #F7F7F7;
		}
		.title2 {
			font-size: 24rpx;
			color: #7F838D;
		}
		.btn {
			background: #5951BA;
			border-radius: 122rpx;
		}
		.box {
			background: #F4F4F4;
			border-radius: 36rpx;
			padding: 30rpx 44rpx;
		}
	}
	.mb14 {
		margin-bottom: 14rpx;
	}

	.mb24 {
		margin-bottom: 24rpx;
	}

	.desc {
		font-size: 24rpx;
		color: #AAACB8;
	}

	.descLight {
		color: #0E0F11;
	}

	.textb {
		font-size: 24rpx;
		color: #F7F7F7;
	}

	.time {
		margin-left: 28rpx;
		width: 120rpx;
		height: 50rpx;
		background: #1F2128;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		color: #F7F7F7;
	}

	.timeLight {
		color: #0E0F11;
		background: #FFFFFF;
	}

	.topBar {
		background: rgba(28, 39, 61, 0.3);
		border-radius: 102rpx;
		border: 2rpx solid rgba(127, 131, 141, 0.3);

		.item {
			padding: 14rpx 28rpx;
			font-size: 28rpx;
			color: #7F838D;
		}

		.item1 {
			padding: 14rpx 28rpx;
			font-size: 28rpx;
			color: #F7F7F7;
			background: #5951BA;
			border-radius: 10000rpx;
		}
	}

	.topBarLight {
		background: #FFFFFF;
	}

	.nameList {
		width: 556rpx;
		margin: 0 auto;
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameListLight {
		.item {
			background: #FFFFFF;
			border: none;
		}

		.item1 {
			background: #5951BA;
			border: none;
		}
	}

	.valueItem3 {
		font-size: 24rpx;
		color: #D22540;
	}
</style>